"use client"

import { useState, useEffect } from 'react'
import { textStyles } from '../lib/fontConfig'
import { useProgressManager, TeacherReminder as ReminderType } from '../lib/progressManager'

interface TeacherReminderProps {
  content: string[]
  type: 'character' | 'radical' | 'stroke'
  position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
  autoHide?: boolean
  className?: string
}

export function TeacherReminder({ 
  content, 
  type, 
  position = 'top-right',
  autoHide = false,
  className = ''
}: TeacherReminderProps) {
  const [reminders, setReminders] = useState<ReminderType[]>([])
  const [isVisible, setIsVisible] = useState(true)
  const [isExpanded, setIsExpanded] = useState(false)
  const { generateTeacherReminders } = useProgressManager()

  useEffect(() => {
    if (content.length > 0) {
      const newReminders = generateTeacherReminders(content, type)
      setReminders(newReminders)
      setIsVisible(newReminders.length > 0)
    }
  }, [content, type, generateTeacherReminders])

  useEffect(() => {
    if (autoHide && reminders.length > 0) {
      const timer = setTimeout(() => {
        setIsVisible(false)
      }, 5000) // 5秒后自动隐藏
      return () => clearTimeout(timer)
    }
  }, [autoHide, reminders])

  if (!isVisible || reminders.length === 0) {
    return null
  }

  const getPositionClasses = () => {
    switch (position) {
      case 'top-right':
        return 'top-4 right-4'
      case 'bottom-right':
        return 'bottom-4 right-4'
      case 'top-left':
        return 'top-4 left-4'
      case 'bottom-left':
        return 'bottom-4 left-4'
      default:
        return 'top-4 right-4'
    }
  }

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high':
        return 'border-red-400 bg-red-50'
      case 'medium':
        return 'border-yellow-400 bg-yellow-50'
      case 'low':
        return 'border-green-400 bg-green-50'
      default:
        return 'border-gray-400 bg-gray-50'
    }
  }

  const getMasteryIcon = (masteryLevel: string) => {
    switch (masteryLevel) {
      case 'mastered':
        return '🌟'
      case 'advanced':
        return '⭐'
      case 'intermediate':
        return '📚'
      case 'beginner':
        return '🔰'
      default:
        return '📖'
    }
  }

  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'character':
        return '🔤'
      case 'radical':
        return '🏗️'
      case 'stroke':
        return '✏️'
      default:
        return '📝'
    }
  }

  return (
    <div className={`fixed ${getPositionClasses()} z-50 ${className}`}>
      <div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg border border-purple-200 max-w-sm">
        {/* 标题栏 */}
        <div className="flex items-center justify-between p-3 border-b border-purple-100">
          <div className="flex items-center space-x-2">
            <span className="text-lg">👩‍🏫</span>
            <h3 className={`${textStyles.tag} text-purple-700 font-bold`}>
              教学提醒
            </h3>
            <span className="text-sm">{getTypeIcon(type)}</span>
          </div>
          <div className="flex items-center space-x-1">
            <button
              onClick={() => setIsExpanded(!isExpanded)}
              className="text-purple-600 hover:text-purple-800 transition-colors"
            >
              {isExpanded ? '📖' : '📋'}
            </button>
            <button
              onClick={() => setIsVisible(false)}
              className="text-gray-400 hover:text-gray-600 transition-colors"
            >
              ✕
            </button>
          </div>
        </div>

        {/* 内容区域 */}
        <div className="p-3 space-y-2 max-h-64 overflow-y-auto">
          {reminders.slice(0, isExpanded ? reminders.length : 3).map((reminder, index) => (
            <div
              key={index}
              className={`p-2 rounded-lg border-l-4 ${getPriorityColor(reminder.priority)} transition-all duration-300 hover:shadow-md`}
            >
              <div className="flex items-center justify-between mb-1">
                <div className="flex items-center space-x-2">
                  <span className="text-lg font-bold text-gray-800">
                    {reminder.content}
                  </span>
                  <span className="text-sm">
                    {getMasteryIcon(reminder.masteryLevel)}
                  </span>
                </div>
                <div className="flex items-center space-x-1 text-xs text-gray-500">
                  <span>第{reminder.lesson}课</span>
                  <span>•</span>
                  <span>{reminder.reviewCount}次</span>
                </div>
              </div>
              
              <div className="text-xs text-gray-600 mb-1">
                <span className={`px-2 py-1 rounded-full text-xs ${
                  reminder.masteryLevel === 'mastered' ? 'bg-green-100 text-green-700' :
                  reminder.masteryLevel === 'advanced' ? 'bg-blue-100 text-blue-700' :
                  reminder.masteryLevel === 'intermediate' ? 'bg-yellow-100 text-yellow-700' :
                  'bg-red-100 text-red-700'
                }`}>
                  {reminder.masteryLevel === 'mastered' ? '已掌握' :
                   reminder.masteryLevel === 'advanced' ? '熟练' :
                   reminder.masteryLevel === 'intermediate' ? '一般' : '初学'}
                </span>
              </div>

              {isExpanded && (
                <div className="text-xs text-gray-600 mt-2 p-2 bg-white/50 rounded">
                  💡 {reminder.suggestion}
                </div>
              )}
            </div>
          ))}

          {!isExpanded && reminders.length > 3 && (
            <div className="text-center">
              <button
                onClick={() => setIsExpanded(true)}
                className="text-xs text-purple-600 hover:text-purple-800 transition-colors"
              >
                还有 {reminders.length - 3} 个提醒...
              </button>
            </div>
          )}
        </div>

        {/* 统计信息 */}
        <div className="px-3 py-2 bg-purple-50 rounded-b-xl border-t border-purple-100">
          <div className="flex justify-between items-center text-xs text-purple-700">
            <span>
              📊 共 {reminders.length} 个{type === 'character' ? '汉字' : type === 'radical' ? '部首' : '笔画'}
            </span>
            <div className="flex space-x-2">
              <span className="flex items-center">
                🔴 {reminders.filter(r => r.priority === 'high').length}
              </span>
              <span className="flex items-center">
                🟡 {reminders.filter(r => r.priority === 'medium').length}
              </span>
              <span className="flex items-center">
                🟢 {reminders.filter(r => r.priority === 'low').length}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// 智能内容提醒组件
interface SmartContentReminderProps {
  targetChar: string
  allContent: string[]
  contentType: 'sentence' | 'word' | 'example'
  position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
}

export function SmartContentReminder({ 
  targetChar, 
  allContent, 
  contentType,
  position = 'bottom-right'
}: SmartContentReminderProps) {
  const [contentAnalysis, setContentAnalysis] = useState<{
    knownContent: string[]
    newContent: string[]
    contentMix: string[]
    knownRatio: number
  } | null>(null)
  const [isVisible, setIsVisible] = useState(false)
  const { generateSmartContent, getLearnedCharacters } = useProgressManager()

  useEffect(() => {
    if (allContent.length > 0) {
      const analysis = generateSmartContent(allContent, allContent.length)
      const learnedChars = getLearnedCharacters()
      const knownRatio = analysis.knownContent.length / allContent.length
      
      setContentAnalysis({
        ...analysis,
        knownRatio
      })
      setIsVisible(true)
    }
  }, [allContent, generateSmartContent, getLearnedCharacters])

  if (!isVisible || !contentAnalysis) {
    return null
  }

  const getPositionClasses = () => {
    switch (position) {
      case 'top-right':
        return 'top-4 right-4'
      case 'bottom-right':
        return 'bottom-4 right-4'
      case 'top-left':
        return 'top-4 left-4'
      case 'bottom-left':
        return 'bottom-4 left-4'
      default:
        return 'bottom-4 right-4'
    }
  }

  return (
    <div className={`fixed ${getPositionClasses()} z-40`}>
      <div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg border border-blue-200 max-w-xs">
        <div className="p-3">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center space-x-2">
              <span className="text-lg">📊</span>
              <h4 className={`${textStyles.caption} text-blue-700 font-bold`}>
                内容分析
              </h4>
            </div>
            <button
              onClick={() => setIsVisible(false)}
              className="text-gray-400 hover:text-gray-600 transition-colors text-xs"
            >
              ✕
            </button>
          </div>

          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <span className="text-xs text-gray-600">已学内容</span>
              <span className="text-xs font-bold text-green-600">
                {Math.round(contentAnalysis.knownRatio * 100)}%
              </span>
            </div>
            
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="bg-green-500 h-2 rounded-full transition-all duration-500"
                style={{ width: `${contentAnalysis.knownRatio * 100}%` }}
              />
            </div>

            <div className="grid grid-cols-2 gap-2 text-xs">
              <div className="text-center p-2 bg-green-50 rounded">
                <div className="font-bold text-green-700">
                  {contentAnalysis.knownContent.length}
                </div>
                <div className="text-green-600">已学</div>
              </div>
              <div className="text-center p-2 bg-orange-50 rounded">
                <div className="font-bold text-orange-700">
                  {contentAnalysis.newContent.length}
                </div>
                <div className="text-orange-600">新学</div>
              </div>
            </div>

            <div className="text-xs text-gray-600 bg-blue-50 p-2 rounded">
              💡 {contentAnalysis.knownRatio >= 0.7 
                ? '内容难度适中，适合当前学习进度' 
                : contentAnalysis.knownRatio >= 0.5
                ? '内容稍有挑战，建议适当降低难度'
                : '内容较难，建议增加已学内容比例'}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
} 